import { View, Text } from '@tarojs/components'
import React from 'react'
import './index.less'

export interface PriceDisplayProps {
  /** 当前价格 */
  currentPrice: string | number
  /** 原价 */
  originalPrice?: string | number
  /** 折扣标签 */
  discount?: string
  /** 价格尺寸 */
  size?: 'small' | 'medium' | 'large'
  /** 价格单位 */
  unit?: string
  /** 是否显示货币符号 */
  showSymbol?: boolean
  /** 自定义类名 */
  className?: string
}

/**
 * PriceDisplay 价格展示组件
 * 统一的价格展示样式，支持原价、现价、折扣标签
 */
const PriceDisplay: React.FC<PriceDisplayProps> = ({
  currentPrice,
  originalPrice,
  discount,
  size = 'medium',
  unit,
  showSymbol = true,
  className = '',
}) => {
  const formatPrice = (price: string | number) => {
    const priceStr = String(price)
    // 如果价格已经包含¥符号，直接返回
    if (priceStr.includes('¥')) {
      return priceStr
    }
    // 如果是数字，格式化为千分位
    if (typeof price === 'number') {
      return showSymbol ? `¥${price.toLocaleString()}` : price.toLocaleString()
    }
    return showSymbol ? `¥${priceStr}` : priceStr
  }

  return (
    <View className={`price-display price-display-${size} ${className}`}>
      <View className='price-content'>
        <Text className='current-price'>{formatPrice(currentPrice)}</Text>
        {unit && <Text className='price-unit'>/{unit}</Text>}
        {originalPrice && (
          <Text className='original-price'>{formatPrice(originalPrice)}</Text>
        )}
        {discount && <Text className='discount-tag'>{discount}</Text>}
      </View>
    </View>
  )
}

export default PriceDisplay

